<!-- 用户账户信息 -->
<template>
    <div>
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="48">
                    <a-col :md="8" :sm="24">
                        <a-form-item label="订单号">
                            <a-input v-model="orderCode" allow-clear placeholder="请输入订单号" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="账户类型">
                            <a-select v-model="directionType" placeholder="请选择" allowClear @change="getData">
                                <a-select-option v-for="(item,i) in directionTypeList" :key="i" :value="item.id">{{item.name}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item >
                            <a-button type="primary" @click="getData()">查询</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>

        <a-table rowKey="id" :loading="isload" :columns="columns" :data-source="dataList" @change="handleTableChange" :pagination="{ pageSize: 10, total: total ,showSizeChanger: true,pageSize: size}" size="small" :scroll="{ x: 1000, }">
            <div slot="directionType" slot-scope="directionType">
                <div v-for="(item,i) in directionTypeList" :key="item.id">
                    <a-tag v-if="item.id == directionType" :color="colors[i%13]">{{item.name}}</a-tag>
                </div>
            </div>
        </a-table>

    </div>
</template>

<script>
import { columns } from './table';
import { queryUserAccountHistory } from '@/api/member';
export default {
    data () {
        return {
            brandId: undefined,
            columns,
            dataList: [],
            total: 0,
            isload: false,
            page: 1,
            size: 10,
            accountType: 0,
            accountTypeList: [
                { id: 0, name: 'CNY账户' },
                { id: 5, name: '积分' },
                { id: 6, name: '能量水晶' },
            ],
            orderCode: '', // 订单号
            accountType: '0', // 账户类型，0：CNY
            directionType: undefined, // 操作类型
            directionTypeList: [
                { id: '0', name: '增加冻结余额'},
                { id: '1', name: '减少冻结余额'},
                { id: '2', name: '将余额转入冻结'},
                { id: '3', name: '从冻结转入余额'},
            ],
            visible: false,
            item: {
                gasFil: 1, // GAS消耗数量
                addOrSub: 1,
                brandName: '',
            },
            confirmLoading: false,
            colors: ['blue','purple','cyan','green','orange','red','pink','brown','indigo','lime','purple','teal','yellow','amber'],
        };
    },
    async created(){
        this.getData()
    },
    methods: {
        // 分页
        handleTableChange(pagination, filters, sorter) {
            console.log(pagination);
            this.page = pagination.current;
            this.size = pagination.pageSize;
            this.getData()
        },
        getData(){
            let _this = this
            const params = {
                'orderCode':_this.orderCode,
                'accountType':_this.accountType,
                'directionType':_this.directionType,
                'size':_this.size,
                'page':_this.page - 1,
            }
            queryUserAccountHistory(params)
            .then(res=>{
                if(res.success){
                    _this.dataList = res.data.content
                    _this.total = res.data.totalElements
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
    }
}

</script>
<style scoped>

</style>